<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col>
        <el-button type="primary" @click="clickCreat">添加智联体</el-button>
      </el-col>
      <el-col>
        <div style="display: flex; justify-content: flex-end">
          <el-input
            @clear="clear"
            clearable
            v-model="form.search"
            style="width: 300px; margin-left: 15px"
            placeholder="搜索公司名称、国家"
            class="input-with-select"
          >
            <el-button
              @click="searchVal"
              slot="append"
              style="
                background-color: #45a321;
                color: #fff;
                border-radius: 0;
                border: 1px solid #45a321;
              "
              >搜索</el-button
            >
            <i slot="prefix-icon" class="el-icon-search"></i>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <el-table
      align="center"
      :data="list.list"
      border
      style="width: 100%; margin: 20px 0"
    >
      <el-table-column align="center" prop="company" label="公司名称">
      </el-table-column>
      <el-table-column align="center" prop="country" label="国家">
      </el-table-column>
      <el-table-column align="center" prop="myorder" label="排序">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            class="editText"
            @click="clickEdit(scope.row.id)"
            type="text"
            >修改</el-button
          >
          <el-button
            class="deletText"
            @click="deletUser(scope.row.id)"
            type="text"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="list.page"
        :page-size="list.size"
        layout="total, prev, pager, next, jumper"
        :total="parseInt(list.count)"
        align="left"
      ></el-pagination>
    </div>
    <el-dialog
      title="添加智联体"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
    >
      <div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">地区</p>
          <div class="left_w">
            <el-select v-model="form.country" placeholder="请选择">
              <el-option
                v-for="item in Country"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">国家</p>
          <div class="left_w">
            <el-input
              v-model="form.tag"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">公司名称</p>
          <div class="left_w">
            <el-input
              v-model="form.company"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">电话</p>
          <div class="left_w">
            <el-input v-model="form.phone" placeholder="请输入电话"></el-input>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">邮箱</p>
          <div class="left_w">
            <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">公司网址</p>
          <div class="left_w">
            <el-input
              v-model="form.web_url"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">地址</p>
          <div class="left_w">
            <el-input
              v-model="form.address"
              placeholder="请输入地址"
            ></el-input>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">排序</p>
          <div class="left_w">
            <el-input
              v-model="form.myorder"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>
        <div class="news_mrt">
          <p>简介</p>
          <Editor
               style="margin-top:20px"
              :id="`test15`"
              v-model="form.content"
          />
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { VUE_APP_BASE_API } from "@/config.js";
import {
  smartList,
  smartAdd,
  smartEdit,
  smartDel,
  smartInfo,
} from "@/api/adminWeb";
import { WebGetCountry } from "@/api/admin";
import Editor from "@/components/Editor";
export default {
  data() {
    return {
      VUE_APP_BASE_API,
      list: [],
      dialogVisible: false,
      form: {
        overseas_smart_id: "",
        company: "",
        country: "",
        email: "",
        phone: "",
        web_url: "",
        address: "",
        myorder: "",
        search: "",
        content: "",
        tag:""
      },
      contentDesc: "",
      clearDesc: 0,
      fileList: [],
      Country: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  components: {
    Editor,
  },
  mounted() {
    this.getLIst();
    this.GetCountry();
  },
  methods: {
    searchVal() {
      this.getLIst();
    },
    clickCreat() {
      this.dialogVisible = true;
    },
    async GetCountry() {
      try {
        this.Country = await WebGetCountry({ type: 4 });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async clickEdit(id) {
      try {
        this.form = await smartInfo({
          overseas_smart_id: id,
        });
        this.contentDesc = this.form.content;
        this.dialogVisible = true;
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    deletUser(id) {
      this.$confirm("此操作将删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await smartDel({
              overseas_smart_id: id,
            });
            this.getLIst();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } catch (error) {
            this.$message.error(error.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    clear() {
      this.getLIst();
    },
    handleClose() {
      this.clearDesc = 1;
      this.dialogVisible = false;
      this.form = {
        overseas_smart_id: "",
        company: "",
        country: "",
        email: "",
        phone: "",
        web_url: "",
        address: "",
        myorder: "",
        content: "",
      };
    },
    async onSuccess(response, file, fileList) {
      if (response) {
        // console.log(response.data.url);
        this.form.tpic = response.data.url;
        this.$nextTick(() => {
          this.form.tpic = response.data.url;
        });
        this.$message.success("上传成功");
      }
    },
    async getLIst(page=1) {
      try {
        this.list = await smartList({
          keyword: this.form.search,
          realm:this.realm,
          page,
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    descVal(val) {
      this.form.content = val;
    },
    async save() {
      try {
        const {
          company,
          country,
          email,
          phone,
          web_url,
          address,
          myorder,
          content,
          tag
        } = this.form;
        if (this.form.id) {
          await smartEdit({
            overseas_smart_id: this.form.id,
            company,
            country,
            email,
            phone,
            web_url,
            address,
            myorder,
            content,
            tag
          });
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.clearDesc = 1;
          this.form = {
            overseas_smart_id: "",
            company: "",
            country: "",
            email: "",
            phone: "",
            web_url: "",
            address: "",
            myorder: "",
            content: "",
          };
        } else {
          await smartAdd({
            company,
            country,
            email,
            phone,
            web_url,
            address,
            myorder,
            content,
            tag
          });
          this.clearDesc = 1;
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.form = {
            overseas_smart_id: "",
            company: "",
            country: "",
            email: "",
            phone: "",
            web_url: "",
            address: "",
            myorder: "",
            content: "",
          };
        }
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    cancle() {
      this.dialogVisible = false;
      this.clearDesc = 1;
      this.form = {
        overseas_smart_id: "",
        company: "",
        country: "",
        email: "",
        phone: "",
        web_url: "",
        address: "",
        myorder: "",
      };
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const resUser = await smartList({
          keywords: this.form.search,
          page: size,
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
          this.getLIst(currentPage)
      } catch (e) {
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.news_mrt {
  margin-bottom: 30px;
}
.left_w {
  width: 80%;
}
</style>